<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
                :delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index"
                :changePage="changePage" :pageSize="page.size">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template>
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :formData="rowData" :options="options" :edit="isEdit" :update="updateData">
                <template #thumb="{ rows }">
                    <img class="table-td-thumb" :src="rows.thumb"></img>
                </template>
            </TableEdit>

            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="学员姓名" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </template>

        </el-dialog>
        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
            <TableDetail :data="viewData">
                <template #thumb="{ rows }">
                    <el-image :src="rows.thumb"></el-image>
                </template>
            </TableDetail>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { TableItem } from '@/types/table';
import { FormOption, FormOptionList } from '@/types/form-option';

import * as coachApi from '@/api/coach'

// 查询相关
const query = reactive<coachApi.coachItemData>({
    coachId: null,
    coachName: '',
    coachAge: null,
    coachCar: '',
    coachIdentityId: '',
    coachSex: '',
    coachPhone: ''
});
const searchOpt = ref<FormOptionList[]>([
    { type: 'input', label: '教练姓名：', prop: 'coachName' },
    { type: 'input-number', label: '教练年龄：', prop: 'coachAge' },
    {
        type: 'select', label: '性别：', prop: 'coachSex',
        opts: [
            { label: '男', value: '男' },
            { label: '女', value: '女' }
        ]
    },
    { type: 'input', label: '身份证号：', prop: 'coachIdentityId' },
])

// 表格相关
let columns = ref([
    { type: 'selection' },
    { type: 'index', label: '序号', width: 55, align: 'center' },
    { prop: 'coachName', label: '姓名' },
    { prop: 'coachAge', label: '年龄' },
    { prop: 'coachSex', label: '性别' },
    { prop: 'coachPhone', label: '电话号码' },
    { prop: 'coachCar', label: '教学车辆' },
    { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
    index: 1,
    size: 8,
    total: 200,
})
const tableData = ref<TableItem[]>([]);
const getData = async () => {
    const res = await coachApi.getAllCoach();
    tableData.value = res.data.data.getAllCoach;
    page.total = tableData.value.length;
};
getData();

const changePage = (val: number) => {
    page.index = val;
};
const handleSearch = async () => {
    const response = await coachApi.filterCoach(query);
    tableData.value = response.data.data.filterCoach;
    page.total = tableData.value.length;
};
// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '100px',
    span: 24,
    list: [
        { type: 'input', label: '姓名', prop: 'coachName', required: true },
        { type: 'input', label: '年龄', prop: 'coachAge', required: true },
        { type: 'input', label: '身份证号', prop: 'coachIdentityId', required: true },
        {
            type: 'select',
            label: '性别',
            prop: 'coachSex',
            required: true,
            opts: [
                { label: '男', value: '男' },
                { label: '女', value: '女' }
            ]
        },
        { type: 'input', label: '电话号码', prop: 'coachPhone', required: true },
        { type: 'input', label: '教学车辆', prop: 'coachCar', required: true },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: TableItem) => {
    rowData.value = { ...row };
    isEdit.value = true;
    visible.value = true;
};
const updateData = async (data) => {
    if (isEdit.value) {
        await coachApi.updateCoach(data as coachApi.coachItemData).then((resp) => {
            console.log(resp);
            ElMessage.success("更新数据成功");
        }).catch((error) => {
            console.log(error);
            ElMessage.error("更新失败");
        })
    } else {
        console.log(sessionStorage.getItem("coachAccountId"));
        await coachApi.addCoach(data as coachApi.coachItemData).then((resp) => {
            console.log(resp);
            ElMessage.success("添加数据成功");
        }).catch((error) => {
            console.log(error);
            ElMessage.error("添加失败");
        })
        closeDialog();
        getData();
    }
    closeDialog();
    getData();
};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
    row: {},
    list: []
});
const handleView = (row: TableItem) => {
    viewData.value.row = { ...row }
    viewData.value.list = [
        {
            prop: 'coachName',
            label: '教练姓名',
        },
        {
            prop: 'coachAge',
            label: '教练年龄',
        },
        {
            prop: 'coachSex',
            label: '教练性别',
        },
        {
            prop: 'coachPhone',
            label: '联系方式',
        },
        {
            prop: 'coachIdentityId',
            label: '身份证号',
        },
        {
            prop: 'coachCar',
            label: '教学车辆',
        },
    ]
    visible1.value = true;
};

// 删除相关
const handleDelete = (row: TableItem) => {
    console.log(row);
    ElMessage.success('删除成功');
}
</script>

<style scoped>
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
